<template>
  <el-card  class="mb-2.5">
    <el-page-header @back="goBack"></el-page-header>
  </el-card>
  <el-card>
    <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item label="分类" prop="cate_id">
        <el-tree-select
            v-model="formData.cate_id"
            :props="defaultProps"
            :data="articleCate"
            :render-after-expand="false"
            check-strictly
            value-key="id"
        />
      </el-form-item>
      <el-form-item label="封面">
        <Upload v-model:modelValue="formData.image" :multiple="false"/>
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" v-model="formData.desc" placeholder="简介"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <WangEditor :height="300" v-model="formData.content"></WangEditor>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="formData.sort" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formData.status">
          <el-radio :value="1">正常</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="作者名">
        <el-input v-model="formData.author_name" placeholder="请输入作者名"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import WangEditor from '@/components/WangEditor.vue'
import {getArticleCateListApi} from '@/api/articleCate'
import {getArticleInfoApi, saveArticleInfoApi, updateArticleInfoApi} from "@/api/article";
import Upload from "@/components/Upload.vue";
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 定义 formData 的类型
interface FormData {
  id?: number;
  image: string;
  sort: number;
  status: number;
  title?: string; // 可选属性
  content?: string; // 可选属性
  cate_id?: number | null; // 分类 ID，可选属性
  desc?: string; // 简介，可选属性
  author_name?: string; // 作者名，可选属性
}

// 配置项
const defaultProps = {
  value: 'id', // 选中值的字段
  label: 'cate_name', // 显示文本的字段
  children: 'children', // 子节点的字段
};

// 响应数据
const formData = ref<FormData>({
  image: '',
  sort: 1,
  status: 1
});
const articleCate = ref([]);
const formDataRef = ref(null);
const route = useRoute();
const router = useRouter();

const rules = reactive({
  title: [
    {required: true, message: '请输入标题', trigger: 'blur'}
  ],
  content: [
    {required: true, message: '请输入内容', trigger: 'blur'}
  ]
})

// 返回列表
const goBack = () => {
  router.back();
}

// 获取分类列表
const getArticleCateList = async () => {
  const response = await getArticleCateListApi();
  articleCate.value = response.data
}

// 获取详情
const getArticleInfo = async () => {
  const response = await getArticleInfoApi(route.query.id);
  formData.value = response.data
}

// 提价事件
const onSubmit = async () => {
  if (!formDataRef.value) return;

  // 校验表单
  await formDataRef.value.validate();

  // 判断是否为新增或更新
  const isUpdate = !!formData.value.id; // 如果存在 id，则为更新操作

  // 执行新增或更新操作
  if (isUpdate) {
    // 更新操作
    await updateArticleInfoApi(formData.value.id, formData.value);
    ElMessage.success('更新成功');
  } else {
    // 新增操作
    await saveArticleInfoApi(formData.value);
    ElMessage.success('新增成功');
  }
}

onMounted(() => {
  getArticleCateList();
  if(route.query.id) {
    getArticleInfo();
  }
});
</script>

<style scoped>

</style>